<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>子元素相对父元素固定定位</title>
    <style>
      .grand {
        position: relative;
      }

      .box {
        height: 100px;
        width: 300px;
        overflow: auto;
        background: green;
        margin-top: 200px;
      }

      .long {
        height: 900%;
        width: 1600px;
        background: blue;
      }

      .fix {
        height: 20px;
        width: 30px;
        background: red;
        position: absolute;
        left: 200px;
        top: 10px;
        z-index: 1;
      }
    </style>
  </head>

  <body>
    <div class="grand">
      <div class="box">
        <div class="long"></div>
        <div class="fix"></div>
      </div>
    </div>
  </body>
</html>
